<template>
  <div>
    <el-form :inline="true" :model="selectData" class="demo-form-inline">
      <el-form-item label="标题">
        <el-input v-model="selectData.title" placeholder="请输入关键字" />
      </el-form-item>
      <el-form-item label="详情">
        <el-input v-model="selectData.body" placeholder="请输入关键字" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table">
      <el-table :data="list[selectData.page]" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="title" label="标题" width="180" />
        <el-table-column prop="body" label="详情" />
      </el-table>
    </div>
    <div class="Pagination">
      <div class="pagination-block">
        <el-pagination @current-change="currentChange" layout="prev, pager, next" :total="selectData.count" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { InitData, LisInt } from '../types/order'
import { getList, login } from '../http/api'

export default defineComponent({
  setup() {
    const data = reactive(new InitData())
    onMounted(() => {
      getList({ page: data.selectData.page }).then((res) => {
        console.log(res)
        data.dataList = res.data
        data.selectData.count = data.dataList.length
        sliceList(res.data)
      })
    })
    const currentChange = (page: number) => {
      data.selectData.page = page - 1
    }
    const sliceList = (arr: LisInt[]) => {
      data.list = []
      for (let index = 0; index < arr.length; ) {
        let list: any = arr.slice(index, (index += 10))
        data.list.push(list)
      }
    }
    const onSubmit = () => {
      const arr: LisInt[] = data.dataList.filter(
        (e) => e.title.includes(data.selectData.title) && e.body.includes(data.selectData.body)
      )
      data.selectData.count = arr.length
      sliceList(arr)
    }
    return {
      ...toRefs(data),
      currentChange,
      onSubmit,
    }
  },
})
</script>

<style scoped></style>
